import React, { useState } from 'react';
import { Modal, Button, Tabs, Form, Select, Input } from 'antd';
import Test from '../components/test';
const { TabPane } = Tabs;
const { Option } = Select;

const paramType = {
  tag: '标签',
  text: '常量',
  time: '时间',
  datetime: '日期时间',
};
export default function index() {
  const [form] = Form.useForm();
  const [defineModelVisible, setDefineModelVisible] = useState(false);
  const [obj, setObj] = useState({});
  const model = [
    {
      code: 'A001',
      paramProperties: [
        {
          name: 'hook1',
          dataType: 'tag',
          tagList: [
            { code: 'link1', name: '链接1' },
            { code: 'link2', name: '链接2' },
          ],
        },
        {
          name: 'hook2',
          dataType: 'text',
        },
      ],
      name: '客户本期投效比较上期上涨明显钉钉群通知：{{hook1}}钉钉机器人投诉效益比异常低 {{hook2}}(投效比 万分钟/投诉），请及时跟进处理。',
      type: 'offlinePunish',
      class: 'com.alicom.security.operation.client.admin.dto.PunishActionDTO',
    },
    {
      code: 'A002',
      paramProperties: [
        {
          name: 'name',
          dataType: 'text',
        },
        {
          name: 'age',
          dataType: 'text',
        },
      ],
      name: '{{name}}你好，你今年多少 {{age}}岁了',
      type: 'offlinePunish',
      class: 'com.alicom.security.operation.client.admin.dto.PunishActionDTO',
    },
  ];

  const onDefineModelCancel = () => {
    setDefineModelVisible(false);
  };

  const onOpenModelCancel = (value) => {
    console.log(value);
    setDefineModelVisible(true);
  };

  document.body.onclick = (e) => {
    if (e?.target?.classList.contains('test')) {
      console.log(e.target?.innerHTML);
      getData(e.target?.innerHTML);
      setDefineModelVisible(true);
    }
  };

  const renderActionDefineModel = () => {
    return (
      <Modal
        visible={defineModelVisible}
        width={600}
        title="动作定义"
        onCancel={onDefineModelCancel}
        footer={[
          <Button key="submit" type="primary">
            保存
          </Button>,
          <Button key="back">取消</Button>,
        ]}
      >
        <Tabs defaultActiveKey="1" type="card">
          <TabPane tab={paramType[obj.dataType]} key={obj.dataType}>
            <Form form={form} style={{ height: '320px' }}>
              {obj.dataType == 'tag' && (
                <Form.Item label="标签值">
                  <Select mode="multiple" allowClear>
                    {obj?.tagList?.map((tag) => {
                      return (
                        <Option
                          key={tag.code}
                          label={tag.name}
                          value={tag.code}
                        />
                      );
                    })}
                  </Select>
                  ,
                </Form.Item>
              )}
              {obj.dataType == 'text' && (
                <Form.Item>
                  <Input.TextArea
                    placeholder="请输入..."
                    style={{ height: '300px' }}
                  />
                  ,
                </Form.Item>
              )}
            </Form>
          </TabPane>
        </Tabs>
      </Modal>
    );
  };
  const handleReplace = (value) => {
    return value.replace(
      /\{\{(.*?)\}\}/g,
      `<span class='test' style='color:red'>$$$1</span>`,
    );
  };

  const getData = (value) => {
    model.map((item) => {
      item.paramProperties.map((param) => {
        if (`$${param.name}` == value) {
          console.log(param);
          setObj({ ...param });
        }
      });
    });
  };

  const renderList = () => {
    return model.map((item) => {
      return (
        <div
          key={item.code}
          dangerouslySetInnerHTML={{ __html: handleReplace(item.name) }}
        ></div>
      );
    });
  };

  return (
    <div>
      {renderList()}
      {renderActionDefineModel()}
    </div>
  );
}
